<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        es5中包含6种数据类型：字符串 数字 布尔 null undefined Object es6加了一种Symbol
        ES5的对象属性名都是字符串，很容易造成属性名冲突。Symbol保证每个属性的名字是独一无二的
     -->
</head>

<body>
    <script>
        var obj1 = {
            name: 'lin',
            age: 23
        }
        // es5对象中的属性名都是字符串
       // console.log(obj1['name']);


        // symbol值通过symbol函数生成 不能使用new命令因为生成的 Symbol 是一个原始类型的值，不是对象 
        //括号中放描述内容 方便阅读调试 如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。
        let firstname = Symbol('symbol的描述内容，方便阅读和代码调试')


        var obj2 = {}
        //  对象的属性名称有两种类型 一种是string 一种是symbol 如果是symbol可以保证不跟其他属性名产生命名冲突
        obj2[firstname] = 'symbol'
        obj2['firstname'] = 'string'
        console.log(obj2[firstname]); //symbol
        // symbol属性名不能用.运算符去访问属性值
        console.log(obj2['firstname'],obj2.firstname); //string string
        console.log(firstname,typeof firstname); //Symbol(symbol的描述内容，方便阅读和代码调试) "symbol"
        console.log(firstname.description); //直接返回symbol的描述

        obj2[firstname]= 'changesymbol';
        console.log(obj2[firstname]);

        var obj3 = {
            // symbol作为属性名的第二种写法
            [firstname] : 'lee',
        }
        console.log('obj3.firstname',obj3[firstname]);

        let obj4 = {}
        // symbol作为属性名的第三种写法
        Object.defineProperty(obj4,firstname,{value: 'Hello!'})
        console.log('obj4.firstname',obj4[firstname]);



    </script>
</body>

</html>